<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>

        // 变量的使用场景：要重复使用一个数据的时候，变量就是一个数据的名字
        // 基本数据类型：string number boolean null undefined bigint symbol
        // 引用数据类型：object
        // 模板字符串使用方法：`${}`

        const num1 = 10
        console.log( num1 + 11)  // 21 
        console.log( num1 + '11') //string 1011
        console.log( num1 +  +'11') //21

        const num2 = 10
        console.log( typeof num2 + '11')  //number11
        console.log( typeof (num2 + '11')) //string
        console.log( typeof (num2 +  +'11'))  //number

    //     var age = prompt('你的年龄？')
    //     console.log(age)
    //     var name = prompt('你的名字？')
    //     console.log(name)

    //     alert(`据我估计，5年之后，${name}你已经${Number(age)+5}岁了`)

    //     var salary = prompt('你的工资是多少？')
    //     var water_cost = prompt('你这个月的水费是多少？')
    //     var electric_cost = prompt('你这个月的电费是多少？')
    //     var rent = prompt('你这个月的房租是多少？')
    //     var cost_table = `
    //     <table border="1" cellspacing = "0">
    //     <tr><td colspan="5"><h2>2020年12月消费支出</h2></td></tr>
    //     <tr>
    //         <th>银行卡余额</th>
    //         <th>水费</th>
    //         <th>电费</th>
    //         <th>房租</th>
    //         <th>银行卡余额</th>
    //     </tr>
    //     <tr>
    //         <td>${+salary}元</td>
    //         <td>${+water_cost}元</td>
    //         <td>${+electric_cost}元</td>
    //         <td>${+rent}元</td>
    //         <td>${+salary-water_cost-electric_cost-rent}元</td>
    //     </tr>
    // </table>    
    //     `
    //     document.write(cost_table)
    </script>
    <style>
        th
        ,td {
            text-align: center;
            height: 50px;
            width: 250px;
            font: 20px/50px '宋体'
        }
    </style>
</head>
<body>

</body>
</html>